<template>
	<view class="content">
		<navbar :title="title" :isback="isback"></navbar>

		<!-- 列表 -->
		<view class="new_list" v-for="(item,index) in list" :key="index">
			<view class="list_title">
				{{item.title}}
			</view>
			<view class="list_info">
				<u-image width="60rpx" height="60rpx" shape="circle" :src="item.avatar"
					@click="viewImg([item.avatar],item.avatar)"></u-image>
				<text style="margin-left: 20rpx;">{{item.name}}</text>
			</view>
			<!-- <u-read-more ref="uReadMore" :color="$store.state.color" text-indent="0"> -->
			<view class="list_content">
				{{item.content}}
			</view>
			<image :src="item.filthImg[0]" v-if="item.filthImg.length == 1" mode="aspectFit" style="margin-top: 20rpx;"
				@click="viewImg(item.filthImg,item.filthImg[0])"></image>
			<view class="list_img" v-else>
				<view class="img" v-for="(it,idx) in item.filthImg" :key="it">
					<u-image width="100%" height="100%" :src="it" @click="viewImg(item.filthImg,it)"></u-image>
				</view>
			</view>
			<!-- </u-read-more> -->

			<view class="list_createTime">
				<view>
					{{$u.timeFrom(item.createTime, 'yyyy年mm月dd日')}}
				</view>
				<view class="hudong" v-if="is_create">
					<u-icon :name="item.is_zan==1?'heart-fill':'heart'" :color="item.is_zan==1?'red':''" size="50"
						@click="zan(item,index)"></u-icon>
			
					<u-icon name="chat" size="50" style="margin-left: 20rpx;" @click="lun({uid:'',name: ''},index)"></u-icon>
			
				</view>
			</view>
			<view class="zan_list" v-if="item.zan.length > 0">
				<text v-for="(it,idx) in item.zan" :key="it.name">{{it.name}} 、</text>
			</view>
			<view class="zan_list comment" v-if="item.comment.length > 0">
				<view class="comment_list" v-for="(comment,idxx) in item.comment" :key="idxx+'comment'">
					<text @click="lun({uid:comment.uid,name: comment.name},index)">{{comment.name}}</text>
					<view class="passive" v-if="comment.passive_uid">
						<text style="color: #000000;">回复</text>
						<text @click="lun({uid:comment.passive_uid,name: comment.passive_name},index)">{{comment.passive_name}}</text>
					</view>
					<text style="color: #000000;"> : </text>
					
					<text style="color: #000000;">{{comment.content}}</text>
				</view>
			</view>

			<!-- <button type="default" @click="remove(item._id,index)">删除</button> -->
		</view>
		
		<!-- 评论 -->
		<view class="pinglun" v-if="is_pinglun">
			<view @click="is_pinglun=false"></view>
			<view>
				<u-input v-model="value" :placeholder="passive.name?'回复'+passive.name+':':'评论'" :focus="focusInput" :type="type" style="width: 100%;background-color: #FFFFFF;padding: 0 10rpx;" />
				<u-button shape="circle" @click="lunSend()" :custom-style="{width: '200rpx',color:'#000000 !important',background: $store.state.color}">评论</u-button>
				<!-- <button type="default">发送</button> -->
			</view>
			
		</view>

		<view class="shareAndimg">
			<view class="">
				<button class="delete_memory" open-type="share" :data-item="item">分享</button>
			</view>
			<view class="">
				<button type="default" @click="saveImage">生成海报</button>
			</view>
		</view>

	</view>
</template>

<script>
	import lPainter from '@/uni_modules/lime-painter/components/lime-painter/'
	export default {
		components: {
			lPainter
		},
		data() {
			return {
				title: '帖子详情',
				isback: true,
				
				// 发表评论
				value: '',
				type: 'text',
				focusInput: true, // 是否聚焦
				listIndex: 0, // 评论第几条笔记
				passive: {},  // 被回复人的信息
				is_pinglun: false, // 是否显示评论输入框
				
				
				list: [], // 获取到的详情
				_id: '', // 详情的数据id
				is_create: false,
				
				userInfo: {},
			}
		},
		onLoad(options) {
			this._id = options._id;
			this.get(options._id);


		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo");
		},
		methods: {
			// 点赞
			zan(item, index) {
				if (!this.userInfo.uid) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../miniLogin/miniLogin'
						})
					}, 1200)
					return
				}
				let that = this;
				uni.showLoading({
					title: '点赞中...'
				})
				uniCloud.callFunction({
					name: 'add',
					data: {
						_id: item._id, // 添加uid，表示用户标识
						memor_uid: item.uid, // 本条内容的发布者id
						zan: {
							uid: that.$store.state.uid,
							name: that.userInfo.name
						},
						zan_status: item.is_zan == 1 ? 2 : 1, // 1:点赞。2:取消点赞
						type: 'zan'
					}
				}).then((res) => {
					uni.hideLoading();
					// console.log(res);
					that.list[index].is_zan = item.is_zan == 1 ? 2 : 1
					that.list[index].zan = res.result.data[0].zan
					uni.showToast({
						title: res.result.msg,
						icon: 'none'
					})
			
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: err,
						showCancel: false
					})
				})
			},
			// 评论
			lun(item,index) {
				this.listIndex = index;
				// console.log(item);
				this.passive = item;
				this.is_pinglun = true;
			},
			// 发送评论
			lunSend(){
				if(this.value == ''){
					uni.showToast({
						title: '请输入您的评论',
						icon: 'none'
					})
					return
				}
				if (!this.userInfo.uid) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../miniLogin/miniLogin'
						})
					}, 1200)
					return
				}
				let that = this;
				uni.showLoading({
					title: '评论中...'
				})
				uniCloud.callFunction({
					name: 'add',
					data: {
						_id: that.list[that.listIndex]._id, 
						memor_uid: that.list[that.listIndex].uid, // 本条内容的发布者id
						comment: {
							uid: that.$store.state.uid,
							name: that.userInfo.name,
							passive_uid: that.passive.uid,
							passive_name: that.passive.name,
							content: that.value
						},
						type: 'lun'
					}
				}).then((res) => {
					uni.hideLoading();
					// console.log(res);
					that.list[that.listIndex].comment = res.result.data[0].comment;
					// 评论成功之后清空脏数据
					that.value = '';
					that.passive = {};
					// 评论成功之后隐藏评论输入框
					that.is_pinglun = false;
					
					uni.showToast({
						title: res.result.msg,
						icon: 'none'
					})
				
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: err,
						showCancel: false
					})
				})
			},
			// 预览图片
			viewImg(urls, current) {
				this.common.viewImg(urls, current)
			},
			// 获取数据
			get(_id) {
				let that = this;
				uni.showLoading({
					title: '获取中...'
				})
				uniCloud.callFunction({
					name: 'get',
					data: {
						dbName: 'memor-pool', //要查询的表名
						filter: {
							_id: _id
						}, //筛选条件，格式{sex:'女'}
						pageIndex: 1, //第几页
						pageSize: 10 //每页的记录条数
					},
					success(res) {
						uni.hideLoading();
						let datalist = res.result.data;
						// 判断是否已点赞
						datalist.forEach((item, index) => {
							item.is_zan = 2;
							if (item.zan) {
								item.zan.forEach((it, idx) => {
									if (it.uid == that.$store.state.uid) {
										item.is_zan = 1;
										return
									}
								})
							}
						
						})
						that.list = datalist;
						that.is_create = res.result.is_create; // 是否可自定义内容
					}
				})
			},
			saveImage(){
				uni.showModal({
					title: '提示',
					content: '敬请期待！！！',
					showCancel:false
				})
			},
			
		},
		onShareAppMessage(res) {
			// let userInfo = uni.getStorageSync("userInfo");
			let list = this.list[0]
			let title = list.name + '的笔记《' + list.title + '》';
			return {
				title: title,
				path: 'pages/index/index?_id=' + this._id,
				imageUrl: '',
				desc: '',
				content: ''
			}
		},
	}
</script>

<style>
	.new_list {
		margin-bottom: 10rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.list_title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.list_info {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		color: #999999;
		font-size: 24rpx;
	}

	.list_content {
		font-size: 28rpx;
	}

	.list_img {
		width: 80%;
		display: flex;
		flex-wrap: wrap;
	}

	.img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 6rpx;
		margin: 10rpx 10rpx 0 0;
	}

	.list_createTime {
		font-size: 24rpx;
		display: flex;
		/* justify-content: flex-end; */
		justify-content: space-between;
		margin-top: 30rpx;
		color: #999999;
	}
	
	.hudong {
		display: flex;
		align-items: center;
	}
	
	.zan_list {
		background-color: #f7f7f7;
		padding: 10rpx 20rpx;
		margin-top: 10rpx;
		color: #566a94;
		display: flex;
		flex-wrap: wrap;
	}
	
	.comment{
		display: flex;
		flex-direction: column;
	}
	.comment_list{
		display: flex;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
		font-size: 26rpx;
	}
	.comment_list>text{
		
	}
	
	/* 发表评论 */
	.pinglun{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0);
		z-index: 9999;
	}
	.pinglun>view:first-child{
		width: 100%;
		height: 100%;
	}
	.pinglun>view:nth-child(2){
		position: absolute;
		bottom: 0;
		z-index: 9999999;
		background-color: #fafbfb;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
	}

	.shareAndimg {
		width: 100%;
		display: flex;
		position: fixed;
		bottom: 0;
	}

	.shareAndimg>view {
		width: 50%;
	}
</style>
